<template>
  <div class="layout">
    <Form
      ref="formValidate"
      :label-width="150"
      label-position="right"
      :model="formValidate"
      :rules="ruleValidate"
    >
      <FormItem label="JSAPI支付应用ID" prop="jsapiAppId">
        <Input maxlength="300" class="w200" v-model="formValidate.jsapiAppId" />
      </FormItem>
      <FormItem label="Native支付应用ID" prop="nativeAppId">
        <Input maxlength="300" class="w200" v-model="formValidate.nativeAppId" />
      </FormItem>
      <FormItem label="小程序支付应用id" prop="mpAppId">
        <Input maxlength="300" class="w200" v-model="formValidate.mpAppId" />
      </FormItem>
      <FormItem label="H5支付应用ID" prop="h5AppId">
        <Input maxlength="300" class="w200" v-model="formValidate.h5AppId" />
      </FormItem>
      <FormItem label="APP支付应用ID" prop="appAppId">
        <Input maxlength="300" class="w200" v-model="formValidate.appAppId" />
      </FormItem>
      <FormItem label="商户号" prop="mchId">
        <Input maxlength="300" class="w200" v-model="formValidate.mchId" />
      </FormItem>
      <FormItem label="APIv3密钥" prop="apiKey3">
        <Input maxlength="300" v-model="formValidate.apiKey3" />
      </FormItem>
      <FormItem label="apiclient_cert_p12" class="label-item" prop="apiclient_cert_p12">
        <Input maxlength="300" v-model="formValidate.apiclient_cert_p12" />
      </FormItem>
      <FormItem label="apiclient_cert_pem" prop="apiclient_cert_pem">
        <Input maxlength="300" v-model="formValidate.apiclient_cert_pem" />
      </FormItem>
      <FormItem label="apiclient_key" prop="apiclient_key">
        <Input maxlength="300" v-model="formValidate.apiclient_key" />
      </FormItem>
      <FormItem label="API证书-证书序列号" prop="serialNumber">
        <Input maxlength="300" v-model="formValidate.serialNumber" />
      </FormItem>
      <FormItem label="支付回调域名" prop="callbackUrl">
        <Input maxlength="300" v-model="formValidate.callbackUrl" />
      </FormItem>
      <div class="label-btns">
        <Button type="primary" @click="submit('formValidate')">保存</Button>
      </div>
    </Form>
  </div>
</template>
<script>
import { setSetting } from "@/api/index";
import { handleSubmit } from "../setting/validate";

export default {
  data() {
    return {
      ruleValidate: {}, // 验证规则
      formValidate: {}, // 表单数据
    };
  },
  props: ["res", "type"],
  created() {
    this.init();
  },
  methods: {
    submit(name) {
      let that = this;
      if (handleSubmit(that, name)) {
        this.setupSetting();
      }
    },
    // 保存设置
    setupSetting() {
      setSetting(this.type, this.formValidate).then((res) => {
        if (res.success) {
          this.$Message.success("保存成功!");
        } else {
          this.$Message.error("保存失败!");
        }
      });
    },
    // 实例化数据
    init() {
      this.res = JSON.parse(this.res);

      this.$set(this, "formValidate", { ...this.res });
      Object.keys(this.formValidate).forEach((item) => {
        if (item.indexOf("pId") < 0) {
          this.ruleValidate[item] = [
            {
              required: true,
              message: "请填写必填项",
              trigger: "blur",
            },
          ];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../setting/style.scss";

.label-item {
  display: flex;
}

.w200 {
  /deep/ .ivu-input {
    width: 250px !important;
    margin: 0 10px;
  }
}

/deep/ .ivu-input {
  width: 450px !important;
  margin: 0 10px;
}

.ivu-input-wrapper {
  width: 450px;
  margin-right: 10px;
}
</style>
